<template>
	<view>
		<view class="viewTab">
			<view class="tabBar top" :style="{ '--color': color, backgroundColor: tabBar.bgColor, '--inactive-color': tabBar.inactiveColor || '#666' }">
				<view class="list flex-1" v-for="(item, index) in tabBar.list" :key="index" :class="!item.isNav && tab == item.id ? 'theme' : 'inactive'" @click="swichTab(item)">
					<view class="bulge flexac zIndex m-bot4" :style="{ background: tabBar.iconBg || '#fff' }" v-if="item.mode">
						<view class="iconfont size50" :class="item.icon" :style="{ color: tabBar.iconColor || '#666' }"></view>
					</view>
					<view class="iconfont size40 m-bot4" :class="item.icon" v-else></view>
					<text class="h6">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<showModel @cancelFunc="setHome({ showMode: false })" v-if="showMode" type="2"></showModel>
		<!-- 打开客服 -->
		<KeFu v-if="showKefu" @cancelFunc="setHomeKefu({ showKefu: false })" @openModal="setHome({ showMode: true })"></KeFu>
		<!-- 分享海报 -->
		<SharePoster v-if="showShareQr" myid=" " type="1" pageType="0" @closePoster="setHomeShare({ showShareQr: false })"></SharePoster>
		<!-- 口令弹框 -->
		<prompt v-if="showPrompt" @cancelFunc="setPrompt(false)"></prompt>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import KeFu from '@/components/showKefu.vue'
import SharePoster from '@/components/sharePoster.vue'
export default {
	name: 'tabBar',
	props: ['tab'],
	data() {
		return {
			defaultTit: {
				// tabBar页面的默认标题
				3: '分类',
				4: '点餐',
				5: '门店',
				6: '预约活动',
				7: '购物车',
				9: '资讯',
				11: '游戏',
				14: '学习',
				15: '答题',
				16: '会员中心'
			}
		}
	},
	components: {
		KeFu,
		SharePoster
	},
	created() {
		uni.hideTabBar()
		if (!this.tab || !this.tabBar) return
		const item = this.tabBar.list.find((n) => !n.isNav && n.id == this.tab)
		const tabTitle = this.defaultTit[this.tab] || ''
		if (!item) return this.changeTab({ tabTitle, tabId: this.tab })
		this.changeTab({ tabTitle: item.title || tabTitle, tabId: item.id })
	},

	methods: {
		...mapMutations(['changeTab', 'setPrompt', 'setHome', 'setHomeKefu', 'setHomeShare']),
		swichTab(item) {
			if (this.showKefu) this.setHomeKefu({ showKefu: false })

			// 功能
			if (item.isNav == 2) return this.$pop.funcBtnClick(item)

			// 跳转普通页面
			if (item.isNav == 1) return this.$banerGo(item)

			// 跳tabBar页面
			let pages = getCurrentPages()
			let page = pages[pages.length - 1]
			console.log('当前tab', item, page)
			if (page.$page.fullPath == item.path) return
			// 所有分类(电商)
			if (item.id == 3 && item.cateType) {
				const path = `${item.path}?cateType=${item.cateType}`
				this.$rectTo(path)
				return
			}
			// 某个分类
			if (item.id == 12) {
				const path = `${item.path}?back=0&classId=${item.classId}`
				this.$rectTo(path)
				return
			}
			// 订单
			if (item.id == 13) {
				const path = `${item.path}?back=0`
				this.$rectTo(path)
				return
			}

			this.$rectTo(item.path)
		}
	},

	computed: {
		...mapState(['tabBar', 'color', 'tabId', 'vid', 'showPrompt', 'showMode', 'showKefu', 'showShareQr'])
	}
}
</script>

<style lang="scss" scoped>
.viewTab {
	width: 100%;
	height: 100rpx;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.tabBar {
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10060;
	box-sizing: content-box;
	display: flex;
	align-items: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	.bulge {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: -60rpx;
		box-shadow: 0 0 20rpx 0 rgba(214, 214, 214, 0.5);
	}
}

.Cutoff {
	width: 100%;
	height: 360rpx;
	box-sizing: border-box;

	padding-bottom: constant(safe-area-inset-bottom);
	/*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom);
	/*兼容 IOS>11.2*/
}

.theme {
	color: var(--color);
}
.inactive {
	color: var(--inactive-color);
}
</style>
